<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
        img{
            width: 200px;
            height: 300px;
        }
        li{
            float: left;
            margin-left: 20px;
        }
        ul{
            list-style: none;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $(function () {

            $(".Lin").click(function () {
                $.ajax({
                    method: "GET",
                    url: "https://douban.uieee.com/v2/music/search?q=林俊杰&count=15",
                    dataType: "jsonp",
                    success: function (r) {
                        $("h5").each(function (i, e) {
                            $(e).text(r.musics[i].title);
                        });
                        $(".zhuanji").each(function (i, e) {
                            $(e).attr("src", r.musics[i].image);
                        });
                        $(".song").each(function (i, e) {
                            $(e).html("专辑歌曲：" + r.musics[i].attrs.tracks);
                        });
                        $(".date").each(function (i, e) {
                            $(e).html("发布时间：" + r.musics[i].attrs.pubdate);
                        })
                    },
                    beforeSend: function () {
                        $(".loading").html("<img src='img/loading.gif' />正在拼命加载中...").css({
                            "margin-left": "500px",
                            "margin-top": "200px"
                        })
                    },
                    complete: function () {
                        $(".loading").hide();
                    }

                })
            });

            $(".Jay").click(function () {
                $.ajax({
                    method: "GET",
                    url: "https://douban.uieee.com/v2/music/search?q=周杰伦&count=15",
                    dataType: "jsonp",
                    success: function (r) {
                        $("h5").each(function (i, e) {
                            $(e).text(r.musics[i].title);
                        });
                        $(".zhuanji").each(function (i, e) {
                            $(e).attr("src", r.musics[i].image);
                        });
                        $(".song").each(function (i, e) {
                            $(e).html("专辑歌曲：" + r.musics[i].attrs.tracks);
                        });
                        $(".date").each(function (i, e) {
                            $(e).html("发布时间：" + r.musics[i].attrs.pubdate);
                        })
                    },
                    beforeSend: function () {
                        $(".loading").html("<img src='img/loading.gif' />正在拼命加载中...").css({
                            "margin-left": "500px",
                            "margin-top": "200px"
                        })
                    },
                    complete: function () {
                        $(".loading").hide();
                    }

                })
            });


            $.ajax({
                method:"GET",
                url:"https://douban.uieee.com/v2/music/search?q=周杰伦&count=15",
                dataType:"jsonp",
                success:function (r) {
                    $("h5").each(function (i,e) {
                        $(e).text(r.musics[i].title);
                    });
                    $(".zhuanji").each(function (i,e) {
                        $(e).attr("src",r.musics[i].image);
                    });
                    $(".song").each(function (i,e) {
                        $(e).html("专辑歌曲："+r.musics[i].attrs.tracks);
                    });
                    $(".date").each(function (i,e) {
                        $(e).html("发布时间："+r.musics[i].attrs.pubdate);
                    })
                },
                beforeSend:function () {
                    $(".loading").html("<img src='img/loading.gif' />正在拼命加载中...").css({"margin-left":"500px","margin-top":"200px"})
                },
                complete:function () {
                    $(".loading").hide();
                }

            });

        })
    </script>
</head>
<body>
<!--导航条-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">最佳歌手</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link Jay" href="#">周杰伦 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link Lin" href="#">林俊杰<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">余倍<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Justin</a>
            </li>
        </ul>
    </div>
</nav>

<!--正文-->
<div class="loading"></div>
<ul>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date" ></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
    <li>
        <img src="" alt="" class="zhuanji">
        <h5></h5>
        <div class="date"></div>
    </li>
</ul>

</body>
</html>